{include file="common/header-top" /}


<style>
    .user-name{
        font-size: 15px;
        font-weight: 600;
    }
    .van-circle__text{
        font-size: 18px !important;
    }
</style>


<div id='app' v-cloak>

    <van-nav-bar
            :title="activeInfo.name"
            left-arrow @click-left="goBack"
            left-text="返回"
            fixed="true"
    > </van-nav-bar>

    <!--兑换比率-->
    <van-row>
        <van-col span="24">
            <van-cell title="兑换比率" icon="/__FRONT__/images/icon/publish-bean.png"></van-cell>
            <van-col span="10">
                <van-grid :column-num="1" icon-size="45px">
                    <van-grid-item
                            icon="/__FRONT__/images/icon/money.png"
                            text="1元"
                    ></van-grid-item>
                </van-grid>
            </van-col>

            <van-col span="4">
                <van-grid :column-num="1" icon-size="45px">
                    <van-grid-item
                            icon="/__FRONT__/images/icon/equal.png"
                    ></van-grid-item>
                </van-grid>
            </van-col>

            <van-col span="10">
                <van-grid :column-num="1" icon-size="45px">
                    <van-grid-item
                            icon="/__FRONT__/images/icon/bean-g.png"
                            :text="showRateBean"
                            :info="publishBeanRate"
                    ></van-grid-item>
                </van-grid>
            </van-col>
        </van-col>
    </van-row>
    <!--兑换比率-->

    <van-divider ></van-divider>

    <!--金额输入框-->
    <van-row>
        <van-cell-group >
            <van-field
                clearable
                input-align="center"
                placeholder="请输入充值的金额"
                left-icon="/__FRONT__/images/icon/money-icon.png"
                right-icon="/__FRONT__/images/icon/yuan-icon.png"
                size="large"
                required
                readonly
                style="border: 1px solid #737373;"
                @focus="moneyFocus"
                :value="totalMoney"
            ></van-field>
        </van-cell-group>
    </van-row>
    <!--金额输入框-->

    <van-row style="margin-top: 5px;">
        <van-col span="24">
            <van-grid :column-num="1" icon-size="55px">
                <van-grid-item
                        icon="/__FRONT__/images/icon/bean-g.png"
                        :text="showExchangeBeanText"
                        :info="totalExchangeBean"
                ></van-grid-item>
            </van-grid>
        </van-col>
    </van-row>

    <van-divider ></van-divider>

    <van-row style="padding-bottom: 55px;">
        <van-col span="24">
            <article v-html="activeInfo.content"></article>
        </van-col>
    </van-row>




    <!--数字键盘-->
    <van-row v-show="showKeyboard">
        <van-number-keyboard
                v-model="totalMoney"
                :show="showKeyboard"
                theme="custom"
                extra-key="."
                close-button-text="完成"
                @blur="inputDone"
                @input="onInput"
                @delete="onDelete"
        ></van-number-keyboard>
    </van-row>
    <!--数字键盘-->



    <!--提交栏-->
    <van-submit-bar
            :price="showTotalMoney"
            button-text="充值"
            @submit="submitBuyBean"
            v-show="showSubmit"
    ></van-submit-bar>
    <!--提交栏-->

</div>









<script>

    Vue.use(vant.Lazyload);

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                currentRate: 0,
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                activeInfo:{
                    id:{$activeId}
                },

                publishBeanRate:'',

                totalMoney: '',
                totalExchangeBean: 0,

                showSubmit: true,
                showKeyboard: false,


            };
        },

        created(){
            //获取充值活动信息
            axiosRequest.get('/api/common/chargeActiveInfo',{params:{id:this.activeInfo.id}})
                .then(function (response) {
                    if (response.code == 200) {
                        vm.$data.activeInfo = response.data;
                        vm.$data.publishBeanRate = response.data.publish_bean;
                    } else {
                        vant.Toast({
                            message: response.msg ? response.msg :'充值活动已结束!',
                            onClose(){
                                window.history.back();
                            }
                        });
                    }
                });

        },

        computed:{
            showRateBean(){
                return this.publishBeanRate + '个';
            },
            showTotalMoney(){
                var totalMoneyNum = parseFloat(this.totalMoney);
                if (!totalMoneyNum) {
                    totalMoneyNum = 0;
                }
                return (totalMoneyNum * 100);
            },
            showExchangeBeanText(){
                return '可兑换 ' + this.totalExchangeBean + ' 个汇豆';
            }
        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },

            //充值提交支付
            submitBuyBean(){
                var postData = {
                    totalMoney: this.totalMoney,
                    totalExchangeBean: this.totalExchangeBean,
                    activeId: this.activeInfo.id,
                };
                axiosRequest.post('/api/user/activeRechargeBean', postData).then(function (response) {
                    if (response.code == 200) {
                        var chargeId = response.data.chargeId;
                        if (chargeId) {
                            window.location.href = '/index/Userwallet/wechatPay?chargeId=' + chargeId;
                        } else {
                            vant.Toast('充值兑换失败,请稍后再试!');
                        }
                    } else {
                        vant.Toast('充值兑换失败,请稍后再试!');
                    }
                });
            },

            //数字键盘输入
            onInput(key){
                this.totalMoney += key.toString();
                this.computerBean();
            },

            //数字键盘删除
            onDelete(){
                this.totalMoney = this.totalMoney.slice(0, (this.totalMoney.length-1));
                this.computerBean();
            },


            //展示数字键盘
            moneyFocus(){
                this.showSubmit = false;
                this.showKeyboard = true;
            },

            //展示提交按钮
            inputDone(){
                this.showSubmit = true;
                this.showKeyboard = false;
            },

            //计算充值的豆
            computerBean(){
                var totalMoneyNum = parseFloat(this.totalMoney);
                if (!totalMoneyNum) {
                    totalMoneyNum = 0;
                }
                this.totalExchangeBean = totalMoneyNum * this.publishBeanRate;
            }

        }
    });




</script>







{include file="common/foot-bottom" /}
